<template>
  <el-dialog
    title="协议列表"
    width="70%"
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
  >
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="protocalItemList"
      height="65vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="address" label="协议名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="协议地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>
    </el-table>


    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="confirmSelect">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<script>
  //协议地址相关
  import { randomUUID } from "@/utils/index";
  import { list as protocolList } from "@/api/shop/protocol";

  export default {
    name: 'protocol-item-multiple-selector-comp',
    components: {},
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      // protocolType: {
      //   type: Number,
      //   default: -1
      // }
    },
    watch: {
      dialogVisible(val) {
        if(val){
          this.getList()
        }
      }
    },
    data() {
      return {
        loading: true,
        protocalItemList: [],
        total: 0,
        multipleSelection: [],
        defaultelection: []
      };
    },
    created() {
      // this.init()
    },
    mounted() {},
    methods: {
      init: function() {

      },
      /**
       * 弹窗控制
       */
      closeDialog() {
        this.$emit('update:dialogVisible', false)
      },
      // 获取所有协议地址
      getList() {
        this.loading = true;
        protocolList({pageNum:1, pageSize:2147483647/*,protocolType:this.protocolType*/,isSpuSide:true}).then(res => {
          this.loading = false;
          if(res.code === 200){
            this.protocalItemList = [];
            res.rows.forEach((item)=>{
              this.protocalItemList.push(item);
            })

            this.defaultSelectedList();
          }
        });

        // this.loading = true;
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.multipleSelection  = selection;
      },
      /**
       * 确认选择
       */
      confirmSelect() {
        let params = {};
        params['multipleSelection'] = [];
        this.multipleSelection.forEach((item)=>{
          let newInfo = {};
          newInfo['id'] = item.id;
          newInfo['name'] = item.name;
          newInfo['address'] = item.address;

          params['multipleSelection'].push(newInfo);
        });

        this.$emit('confirm', params);
        this.closeDialog()
      },
      // 获取列表以后默认选中之前勾选的数据的逻辑
      defaultSelectedList() {
        this.$nextTick(() => {
          for(let i=0;i<this.defaultelection.length;i++){
            let itemInfo = this.defaultelection[i];
            for(let j=0;j<this.protocalItemList.length;j++){
              let selectedItem = this.protocalItemList[j];
              if(itemInfo.id === selectedItem.id){
                this.$refs.multipleTable.toggleRowSelection(this.protocalItemList[j], true);
              }
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .select-top {
  .el-table__header .cell .el-checkbox__inner {
    display: none;
  }
  }
</style>
